<template>
  <page-wrap
    :header-props="headerProps"
    scrollType="bs"
    :initBs="initBs"
    :load="loadData"
  >
    <template v-slot:extension> </template>
    <template v-slot:RollingLow>
      <z-search
        placeholder="请输入会员卡号或者手机号"
        v-model="inputInfo"
        type="number"
        @query="Onsearch"
        @update:model-value="onUpdateVal"
      ></z-search>

      <div class="member-container-summary">
        <div class="summary-header">
          <div style="color: #cccccc">会员总数：</div>
          <div style="color: #ffffff">{{ memberCount.allCount }}</div>
        </div>
        <div class="summary-main">
          <div class="summary-main-left">
            <div class="summary-num">{{ memberCount.todayCount }}</div>
            <div class="summary-item">今日新增</div>
          </div>
          <div class="summary-main-right">
            <div class="summary-right-title">
              <div class="summary-icon">￥</div>
              <div class="summary-num">{{ memberCount.todayCharge }}</div>
            </div>
            <div class="summary-item">今日充值金额</div>
          </div>
        </div>
      </div>
    </template>
    <div class="member-container">
      <div class="member-container-main" v-if="memberLists.length">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <div
            class="member-user-item"
            v-for="(item, index) in memberLists"
            :key="index"
            @click="goToDetails(item.mobile,item.code)"
          >
            <div class="user-item-upper">
              <div class="item-upper-left">
                <div class="user-name">{{ item.name }}</div>
                <div class="user-id">{{ item.code }}</div>
              </div>
              <div class="item-upper-right">
                <div class="user-balance">
                  {{ item.currentAmtAct.toFixed(2) }}
                </div>
              </div>
            </div>
            <div class="user-item-below">
              <div class="user-phone">{{ hideMiddleDigits(item.mobile) }}</div>
              <div class="user-time">
                <span> 上次消费：</span
                ><span v-if="item.lastDate">{{
                  dayjs(item.lastDate).format('YYYY-MM-DD')
                }}</span
                ><span v-if="!item.lastDate">--</span>
              </div>
            </div>
            <div class="user-icon"></div>
          </div>
        </van-list>
      </div>
      <div v-else>
        <z-empty type="search"></z-empty>
      </div>
    </div>
  </page-wrap>
</template>

<script setup>
import { reactive } from 'vue'
import dayjs from 'dayjs'
import Api from '@/api'
import { showToast } from 'vant'
const route = useRoute()
const router = useRouter()
//表单
const postForm = reactive({
  key: '',
  page: 1,
  pageSize: 15
})
const memberLists = ref([]) // 会员列表
const memberCount = ref([]) // 汇总
// ------------------------------------------------------头部配置------------------------------------------------------------------
const headerProps = {
  operation: [
    {
      type: 'text',
      v: '开卡',
      style: {
        background: '#28282E',
        borderRadius: '2px',
        padding: '5px 10px'
      },
      click () {
        router.push('/onmember/open')
      }
    }
  ]
}
// -------------------------------------------------------搜索---------------------------------------------------------------------
//    输入框内容
const inputInfo = ref('')
const Onsearch = () => {
  finished.value = false
  postForm.key = inputInfo.value
  postForm.page = 1
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    finished.value = false
    postForm.key = inputInfo.value
    postForm.page = 1
    loadData(true)
  }, 500)
}
// -------------------------------------------------------跳转到详情页---------------------------------------------------------------------
const goToDetails = (value,code) => {
  console.log(value,code);
  router.push({
    name: `OnmemberDetails`,
    query: { memberId: code,code:code }
  })
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.page = 1
    memberLists.value = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetMemberLists',
    contentData: postForm
  })
  const nowList = resp.result
  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  Array.prototype.push.apply(memberLists.value, nowList)
  if (nowList.length > 0) {
    postForm.page++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}
// -------------------------------------------------隐藏手机号码中间的4位数------------------------------------------
const hideMiddleDigits = phone => {
  if (phone) {
    const start = phone.substring(0, 3)
    const end = phone.substring(7)
    return start + '****' + end
  }
}
//------------------------------------------------------获取初始数据------------------------------------------------------------------
const Init = () => {
  loadData(true)
  // 汇总查询
  const getMemberCount = Api.Common.AppObjProcess.Do({
    functionName: 'GetMemberCount',
    contentData: ''
  }).then(res => {
    memberCount.value = res.result[0]
  })
}
Init()
</script>

<style scoped lang="scss">
.member-container-summary {
  background: #28282e;
  border-radius: 8px;
  margin: 0 12px 10px 12px;
  .summary-header {
    padding: 12px 0 16px 12px;
    font-size: 13px;
    line-height: 13px;
    display: flex;
  }
  .summary-main {
    display: flex;
    text-align: center;

    .summary-main-left {
      flex-basis: 50%;
      border-right: 1px solid #383840;
      margin-bottom: 18px;
    }
    .summary-main-right {
      flex-basis: 50%;
      margin-bottom: 18px;
      .summary-right-title {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        .summary-icon {
          font-size: 12px;
          color: #ffaa00;
          line-height: 12px;
        }
      }
    }
    .summary-num {
      font-size: 24px;
      color: #ffaa00;
      line-height: 24px;
    }
    .summary-item {
      font-size: 12px;
      color: #cccccc;
      line-height: 12px;
      padding: 12px 0 0 0;
    }
  }
}
.member-container {
  font-family: PingFang SC;
  font-weight: 500;
  padding: 0px 12px 10px 12px;

  .member-container-main {
    .member-user-item {
      padding: 16px 26px 18px 12px;
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;
      position: relative;
      .user-item-upper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
        .item-upper-left {
          display: flex;
          .user-name {
            line-height: 18px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px; /* 根据字体大小调整最大宽度 */
          }
          .user-id {
            background: #403d37;
            border-radius: 2px;
            margin-left: 8px;
            padding: 4px 7px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffaa00;
            line-height: 12px;
            position: relative;
            white-space: nowrap;
          }
        }
        .item-upper-right {
          .user-balance {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
          }
        }
      }
      .user-item-below {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-phone {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 12px;
        }
        .user-time {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 12px;
        }
      }
      .user-icon {
        position: absolute;
        top: calc(50% - 6px);
        right: 12px;
        width: 6px;
        height: 12px;
        background-image: url('@/assets/svg/member/v_member-triangle2.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
